<template>
    <div @click="sayMsg">
      <h1>P151 - watch监视ref中定义的属性</h1>
        <div>num:{{ num }}</div>
      <button @click="num++">点我+1</button>
      <div>name:{{ name }}</div>
      <button @click="name+='~'">点我+~</button>
    </div>
  </template> 
          
    <script>
  import { computed, reactive, ref, watch } from "vue";
  export default {
    name: "App",
    setup(props, context) {
        let num = ref(0);
        let name = ref('mikaisa');
        
        // 情况1： 监视一个ref定义的响应式数据
        // watch(name,(newVal,oldVal)=>{
        //     console.log('name变了');
        // });
        
        // watch(num,(newVal,oldVal)=>{
        //     console.log('num变了');
        // });
        

        // 情况2：监视多个ref定义的响应式数据
        watch([name,num],(newVal,oldVal)=>{
            console.log('name或者num变了');
        });

        return {
            num,name
        }

    },
  };
  </script>
          
  <style>
  .zhedie {
    height: 15px;
    overflow: hidden;
  }
  </style>
          